<template>
  <main class="am-g max-width-1350">

    <am-col :span="12"><article class="dg-art">

      <!-- 标签筛选 -->
      <transition name="slide-down"><am-container v-show="open">
        <am-list :static="true">
          <am-list-item v-for="(tag, indexTag) in tags" :key="indexTag">
            <b>{{ tag.main.name }}：</b>
            <span v-for="(item, indexItem) in tag.sub" :key="indexItem"
              style="user-select:none;"
              :class="[ item.isChosen ? 'am-text-danger' : '', 'sub-tag' ]"
              @click="choose(item)">
              {{ item.name }}
            </span>        
          </am-list-item>
        </am-list>
        <a href="javascript:;" class="am-link-muted am-fr am-margin-bottom-xs" @click="clearTags">清空选中标签</a>
      </am-container></transition>

      <am-container>
        <!-- 大赛届数 -->
        <div class="am-u-sm-12 am-u-md-4">
          <am-select ref="gameSelect" :options="game.list" :placeholder="game.selected"></am-select>
          <!-- <select class="am-form-field" v-model="game.selected" style="appearance:normal;">
            <option v-for="(item, index) in game.list" :key="index"
            :value="item.ID">{{ item.label }}</option>
          </select> -->
        </div>

        <!-- 快速排序 -->
        <div class="am-u-sm-12 am-u-md-8">
          <section class="dg-sm-only-margin-top">
            <am-button-group>
              <am-button size="sm" v-for="(btn, index) in sorts" :key="index"
                :is-active="sortsIndex === index"
                @click="sortsIndex = index">
                {{ btn.label }}
                <am-icon :class="{ 'reversal' : index === sortsIndex }"
                  v-if="index !== 0" style="transition: all .5s;"
                  type="long-arrow-up"></am-icon>
              </am-button>
            </am-button-group>
            <am-button :round="true" custom-class="am-fr" @click="open = !open">
              <am-icon style="transition: all .5s;" :class="{ 'reversal': open }" type="chevron-down"></am-icon>
            </am-button>
          </section>
        </div>
      </am-container>
    </article></am-col>
  </main>
</template>

<script>
export default {
  name: 'filter-panel',
  data() {
    return {
      open: true,

      /**
       * 筛选条件
       */
      sortsIndex: 0,
      sorts: [{
        code: '0',
        label: '默认排序',
      }, {
        code: '1',
        label: '点击率',
      }, {
        code:　'2',
        label: ' 票数 ',
      }],
      subChoices: [],
      mainChoices: [],
      choices: []
    }
  },
  computed: {
    gameID() {
      const tem = this.$route.params.gameID;
      return tem === 'cur' ? this.$store.getters.gameID : tem;
    },
    game() {
      const tem =  {
        selected: '',
        list: []
      }
      tem.list = this.$store.state.preGames.map(game => {
        return {
          ID: game.ID,
          label: game.name
        }
      });
      tem.selected = tem.list.find(t => t.ID === this.gameID).label;
      return tem;
    },
    tags() {// 标签信息
      return this.$store.state.tags.map(tag => {
        tag.sub.forEach(s => this.$set(s, 'isChosen', false));
        return tag;
      });
    }
  },
  methods: {
    ready() {
      // this.init();
    },

    init() {
      this.choices = this.tags.map(tag => {
        tag.sub.forEach(s => this.$set(s, 'isChosen', false));
        return {
          mainID: tag.main.id,
          subIDs: []
        }
      });
    },

    /**main父，sub子 */
    choose(item) {// 选中
      // item.isChosen = !item.isChosen;
      this.$set(item, 'isChosen', !item.isChosen);
      this.choices.push(item);
      this.choices = this.choices.filter(i => i.isChosen);
    },
    clearTags() {
      this.init();
    }
  },
  watch: {
  },
  mounted() {
    this.ready();
  }
}
</script>

<style lang="less" scoped>
.sub-tag { margin: 0 0.3rem; }
.reversal {
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}
</style>